.ant-collapse.collections-list-item {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  box-sizing: border-box;

  // TEMP FIX: Added left padding to colllection name because drag preview of collection looks broken;
  // TODO: Rever this when drap preview is implemented
  .ant-collapse-header.ant-collapse-icon-collapsible-only {
    gap: unset !important;

    .collection-name-container {
      padding-left: 8px;
    }
  }

  .loading-collection-row {
    li {
      margin-top: 8px;
      width: 100% !important;
      height: 8px;
    }
  }

  .collection-options {
    .ant-btn.ant-btn-sm.rq-custom-btn.icon-only-btn:hover {
      svg {
        color: white;
      }
    }
  }
}
.collection-dropdown-menu .ant-dropdown-menu {
  min-width: 160px;

  .collection-row-option {
    display: flex;
    align-items: center;
    gap: 8px;

    svg {
      --size: 13px;
      width: var(--size);
      height: var(--size);
    }
  }
}

.collection-drop-target {
  & > .ant-collapse.collections-list-item {
    background: #004eeb33;
    border-color: var(--requestly-color-primary-600);
  }
}

.collection-panel.selected {
  > .ant-collapse-header {
    background-color: rgba(255, 255, 255, 0.08) !important;
    padding-left: calc(var(--requestly-space-4) - 3px);

    &:hover {
      background-color: rgba(255, 255, 255, 0.12) !important;
    }
  }
}

.collection-panel.active.selected > .ant-collapse-header {
  border-left: 2px solid var(--requestly-color-primary-500);
}

.collection-panel.selected + .ant-collapse-content {
  background: transparent;
}
